import Image from "next/image";

function FitImage({ src, alt, onClick }: { src: string, alt: string, onClick: () => void }) {
    return (
        <Image
            src={src}
            alt={alt}
            style={{ width: '100%', height: 'auto', objectFit: 'cover' }}
            sizes="(max-width: 600px) 100vw, 200px"
            // 这里不使用fill，直接让图片按原始宽高比例自适应宽度
            layout="responsive"
            width={0}
            height={0}
            priority
            // width和height设为0，Image组件会自动根据图片原始比例渲染
            // 你也可以传入实际宽高，如果已知的话
            onClick={onClick}
        />
    );
}

export default FitImage;